<template lang="html">
    <div class="">
        <button type="button" @click="change(1)" class="btn btn-success" name="button">组件1</button>
        <button type="button" @click="change(2)" class="btn btn-success" name="button">组件2</button>
        <!-- <child1></child1>
        <child2></child2> -->
        <!-- 注意 is前面有 : -->
        <p :is="currentCom" ></p>
    </div>
</template>

<script>
import Child1 from '@/page/com/isChild1'
import Child2 from '@/page/com/isChild2'
export default {
	data() {
		return {
			currentCom: 'child1'
		}
	},
	components: {
		Child1,
		Child2
	},
	methods: {
		change(index) {
			if (index == 1) {
				this.currentCom = 'child1';
			} else {
				this.currentCom = 'child2';
			}
		}
	}
}
</script>

<style lang="css">
</style>
